<template>
  <div class="reward-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">奖惩管理流程</h2>
      </div>
    </div>

    <div class="process-timeline">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(step, index) in processSteps" 
                 :key="index" 
                 :title="step.title"
                 :description="step.shortDesc"
                 @click.native="goToStep(index)">
          <template slot="icon">
            <i :class="step.icon"></i>
          </template>
        </el-step>
      </el-steps>

      <div class="process-content">
        <el-card class="current-step-info">
          <template v-if="currentStepInfo">
            <div class="step-header">
              <h3>{{ currentStepInfo.title }}</h3>
              <p class="description">{{ currentStepInfo.description }}</p>
            </div>
            
            <div class="step-actions">
              <el-form v-if="currentStepInfo.formItems" 
                      :model="formData"
                      :rules="rules"
                      ref="stepForm" 
                      label-width="120px"
                      class="step-form">
                <el-form-item v-for="(item, index) in currentStepInfo.formItems"
                             :key="index"
                             :label="item.label"
                             :prop="item.prop"
                             :required="item.required">
                  <el-input v-if="item.type === 'input'" 
                           v-model="formData[item.prop]"
                           :type="item.inputType || 'text'"
                           :placeholder="item.placeholder">
                    <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                  </el-input>
                  <el-select v-else-if="item.type === 'select'"
                            v-model="formData[item.prop]"
                            :placeholder="item.placeholder"
                            :multiple="item.multiple">
                    <el-option v-for="option in item.options"
                             :key="option.value"
                             :label="option.label"
                             :value="option.value">
                    </el-option>
                  </el-select>
                  <el-date-picker v-else-if="item.type === 'date'"
                                v-model="formData[item.prop]"
                                :type="item.dateType || 'date'"
                                :placeholder="item.placeholder"
                                value-format="yyyy-MM-dd">
                  </el-date-picker>
                  <el-input v-else-if="item.type === 'textarea'"
                           type="textarea"
                           v-model="formData[item.prop]"
                           :rows="item.rows || 4"
                           :placeholder="item.placeholder">
                  </el-input>
                  <el-upload v-else-if="item.type === 'upload'"
                            class="upload-demo"
                            action="#"
                            :auto-upload="false"
                            :on-change="handleFileChange"
                            :file-list="fileList">
                    <el-button size="small" type="primary">选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">{{ item.tip }}</div>
                  </el-upload>
                </el-form-item>
              </el-form>
              
              <div class="step-tips" v-if="currentStepInfo.tips">
                <h4>注意事项：</h4>
                <ul>
                  <li v-for="(tip, index) in currentStepInfo.tips" :key="index">{{ tip }}</li>
                </ul>
              </div>
              
              <div class="button-group">
                <el-button v-if="currentStep > 0" 
                          @click="prevStep"
                          icon="el-icon-arrow-left">上一步</el-button>
                <el-button type="primary" 
                          @click="nextStep"
                          :loading="submitting"
                          :disabled="!canProceed">
                  <i :class="currentStep === processSteps.length - 1 ? 'el-icon-check' : 'el-icon-arrow-right'"></i>
                  {{ currentStep === processSteps.length - 1 ? '完成' : '下一步' }}
                </el-button>
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RewardProcess',
  data() {
    const validateNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入金额'))
      } else if (isNaN(value)) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }

    return {
      currentStep: 0,
      formData: {},
      fileList: [],
      submitting: false,
      rules: {
        rewardType: [],
        employeeId: [],
        reason: [],
        amount: [

        ],
        effectiveDate: [],
        approvers: []
      },
      processSteps: [
        {
          title: '基本信息',
          shortDesc: '填写奖惩基本信息',
          icon: 'el-icon-medal',
          description: '请填写奖惩申请的基本信息',
          formItems: [
            {
              type: 'select',
              label: '奖惩类型',
              prop: 'rewardType',
              placeholder: '请选择奖惩类型',
              required: false,
              options: [
                { label: '绩效奖金', value: 'performance_bonus' },
                { label: '项目奖励', value: 'project_reward' },
                { label: '创新奖励', value: 'innovation_reward' },
                { label: '工作失误处罚', value: 'work_error_penalty' },
                { label: '违规处分', value: 'violation_penalty' },
                { label: '特殊贡献奖', value: 'special_contribution' }
              ]
            },
            {
              type: 'select',
              label: '员工选择',
              prop: 'employeeId',
              placeholder: '请选择员工',
              required: false,
              options: [
                // 实际应用中应从后端获取员工列表
                { label: '张三 - 技术部', value: '1001' },
                { label: '李四 - 市场部', value: '1002' },
                { label: '王五 - 人事部', value: '1003' }
              ]
            },
            {
              type: 'select',
              label: '所属部门',
              prop: 'department',
              placeholder: '请选择部门',
              required: false,
              options: [
                { label: '技术部', value: 'tech' },
                { label: '市场部', value: 'marketing' },
                { label: '人事部', value: 'hr' },
                { label: '财务部', value: 'finance' }
              ]
            },
            {
              type: 'date',
              label: '生效日期',
              prop: 'effectiveDate',
              placeholder: '请选择生效日期',
              required: false
            }
          ],
          tips: [
            '奖惩类型选择应符合公司规章制度',
            '确保选择正确的员工信息',
            '生效日期应在申请审批通过后'
          ]
        },
        {
          title: '奖惩详情',
          shortDesc: '填写具体奖惩内容',
          icon: 'el-icon-document',
          description: '请详细说明奖惩的具体内容和原因',
          formItems: [
            {
              type: 'textarea',
              label: '奖惩原因',
              prop: 'reason',
              placeholder: '请详细描述奖惩原因',
              required: false,
              rows: 4
            },
            {
              type: 'input',
              inputType: 'number',
              label: '奖惩金额',
              prop: 'amount',
              placeholder: '请输入金额',
              required: false,
              unit: '元'
            },
            {
              type: 'select',
              label: '奖惩级别',
              prop: 'level',
              placeholder: '请选择奖惩级别',
              options: [
                { label: '一般', value: 'normal' },
                { label: '重要', value: 'important' },
                { label: '特殊', value: 'special' }
              ]
            },
            {
              type: 'upload',
              label: '相关证明',
              prop: 'evidence',
              tip: '请上传相关证明材料（如：工作成果、事件记录等）'
            }
          ],
          tips: [
            '奖惩原因应客观详实，有理有据',
            '金额应符合公司奖惩标准',
            '重要奖惩建议提供相关证明材料'
          ]
        },
        {
          title: '执行方案',
          shortDesc: '制定执行计划',
          icon: 'el-icon-set-up',
          description: '设置奖惩执行的具体方案',
          formItems: [
            {
              type: 'select',
              label: '执行方式',
              prop: 'executeMethod',
              placeholder: '请选择执行方式',
              options: [
                { label: '单次发放/扣除', value: 'once' },
                { label: '分期发放/扣除', value: 'installment' },
                { label: '计入年终奖', value: 'year_end' }
              ]
            },
            {
              type: 'input',
              label: '执行期限',
              prop: 'executePeriod',
              placeholder: '请输入执行期限',
              unit: '月'
            },
            {
              type: 'textarea',
              label: '执行说明',
              prop: 'executeDescription',
              placeholder: '请输入具体执行说明',
              rows: 4
            },
            {
              type: 'select',
              label: '通知范围',
              prop: 'notifyScope',
              placeholder: '请选择通知范围',
              multiple: true,
              options: [
                { label: '本人', value: 'self' },
                { label: '部门内部', value: 'department' },
                { label: '全公司', value: 'company' }
              ]
            }
          ],
          tips: [
            '执行方式应考虑员工实际情况',
            '重大奖惩建议适当扩大通知范围',
            '执行说明应包含具体实施细节'
          ]
        },
        {
          title: '审批流程',
          shortDesc: '设置审批流程',
          icon: 'el-icon-s-check',
          description: '配置奖惩审批流程',
          formItems: [
            {
              type: 'select',
              label: '审批人',
              prop: 'approvers',
              placeholder: '请选择审批人',
              required: false,
              multiple: true,
              options: [
                { label: '直接主管', value: 'direct_supervisor' },
                { label: '部门经理', value: 'department_manager' },
                { label: '人事主管', value: 'hr_supervisor' },
                { label: '总经理', value: 'general_manager' }
              ]
            },
            {
              type: 'select',
              label: '审批方式',
              prop: 'approvalMethod',
              placeholder: '请选择审批方式',
              options: [
                { label: '依次审批', value: 'sequential' },
                { label: '会签', value: 'countersign' }
              ]
            },
            {
              type: 'textarea',
              label: '备注说明',
              prop: 'remarks',
              placeholder: '请输入备注说明',
              rows: 4
            }
          ],
          tips: [
            '重大奖惩需要更高级别的审批',
            '确保审批流程符合公司规定',
            '建议添加必要的说明信息'
          ]
        }
      ]
    }
  },
  computed: {
    currentStepInfo() {
      return this.processSteps[this.currentStep]
    },
    canProceed() {
      return true // 实际应用中需要根据表单验证结果返回
    }
  },
  methods: {
    goToStep(index) {
      if (index <= this.currentStep) {
        this.currentStep = index
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    async nextStep() {
      try {
        await this.$refs.stepForm.validate()
        if (this.currentStep < this.processSteps.length - 1) {
          this.currentStep++
        } else {
          await this.completeProcess()
        }
      } catch (error) {
        return false
      }
    },
    async completeProcess() {
      this.submitting = true
      try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.$message.success('奖惩管理流程已完成')
        this.$router.push('/main/process')
      } catch (error) {
        this.$message.error('提交失败，请重试')
      } finally {
        this.submitting = false
      }
    },
    handleFileChange(file, fileList) {
      this.fileList = fileList.slice(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.reward-process {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    
    .header-content {
      text-align: center;
    }

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
      cursor: pointer;

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .process-timeline {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .el-steps {
      margin-bottom: 40px;
    }
  }

  .process-content {
    margin-top: 20px;

    .current-step-info {
      text-align: center;

      .step-header {
        margin-bottom: 10px;
      }

      .description {
        color: #606266;
        margin-bottom: 20px;
      }

      .step-form {
        max-width: 600px;
        margin: 0 auto;
        text-align: left;
      }

      .step-tips {
        margin-top: 20px;
        margin-bottom: 30px;

        h4 {
          color: #303133;
          margin-bottom: 10px;
        }

        ul {
          list-style: none;
          padding-left: 0;

          li {
            color: #606266;
          }
        }
      }

      .button-group {
        margin-top: 30px;

        .el-button {
          margin: 0 10px;
        }
      }
    }
  }

  :deep(.el-step__icon) {
    cursor: pointer;
  }
}
</style> 